<template>
  <div class="edit-box" v-if="formData">
    <el-form label-width="120px" class="form-grid" :model="formData">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="ID"><el-input v-model="formData.id" readonly /></el-form-item>

          <el-form-item label="订单号"><el-input v-model="formData.order_no" readonly /></el-form-item>
          <el-form-item label="商户名称"><el-input v-model="formData.merchant_name" readonly /></el-form-item>
          <el-form-item label="地址信息">
            <div class="address">
              <div>{{formData.address.province+formData.address.city+formData.address.area}}</div>
              <div>姓名：{{formData.address.name}}</div>
              <div>电话：{{formData.address.tel}}</div>
              <div>详细地址：{{formData.address.address}}</div>
              <div>其它：{{formData.address.storey+' '+formData.address.house_number}}</div>
            </div>


          </el-form-item>
          <el-form-item label="订单金额"><el-input v-model="formData.total_price" readonly /></el-form-item>
          <el-form-item label="支付金额"><el-input v-model="formData.pay_price" readonly /></el-form-item>
          <el-form-item label="支付方式"><el-input v-model="formData.pay_type" readonly /></el-form-item>
          <el-form-item label="支付时间"><el-input v-model="formData.pay_time" readonly /></el-form-item>
        </el-col>

        <el-col :span="12">

          <el-form-item label="快递公司"><el-input v-model="formData.delivery_name" readonly /></el-form-item>
          <el-form-item label="发货单号"><el-input v-model="formData.freight_no" readonly /></el-form-item>
          <el-form-item label="发货时间"><el-input v-model="formData.delivery_time" readonly /></el-form-item>
          <el-form-item label="完成时间"><el-input v-model="formData.completion_time" readonly /></el-form-item>
          <el-form-item label="订单状态">
            <el-tag :type="ORDER_STATUS[String(formData.status)] && ORDER_STATUS[String(formData.status)].type"
              disable-transitions>
              <i :class="ORDER_STATUS[String(formData.status)] && ORDER_STATUS[String(formData.status)].icon"
                style="margin-right: 4px" />
              {{ ORDER_STATUS[String(formData.status)] ? ORDER_STATUS[String(formData.status)].text : '未知状态' }}
            </el-tag>
          </el-form-item>

          <el-form-item label="售后类型">
            <el-tag
              :type="APPLY_FOR_TYPE[String(formData.apply_for_type)] && APPLY_FOR_TYPE[String(formData.apply_for_type)].type"
              disable-transitions>
              <i :class="APPLY_FOR_TYPE[String(formData.apply_for_type)] && APPLY_FOR_TYPE[String(formData.apply_for_type)].icon"
                style="margin-right: 4px" />
              {{ APPLY_FOR_TYPE[String(formData.apply_for_type)] ? APPLY_FOR_TYPE[String(formData.apply_for_type)].text : '无售后信息' }}
            </el-tag>
          </el-form-item>

          <el-form-item label="售后状态">
            <el-tag
              :type="STORE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)] && STORE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)].type"
              disable-transitions>
              <i :class="STORE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)] && STORE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)].icon"
                style="margin-right: 4px" />
              {{ STORE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)] ? STORE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)].text : '无售后信息' }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品信息" class="full-width">
        <div class="goods-box" v-for="(item, index) in formData.order_info" :key="index">
          <el-image :src="$imageFull(item.product_image)" style="height: 60px; width: 60px; border: 1px solid #ececec;" />
          <div class="product-item">{{item.product_name}}</div>
          <div class="product-item">x{{item.cart_num}}</div>
          <div class="product-item">总价：{{item.total_price}}</div>
        </div>


      </el-form-item>

      <el-form-item label="备注" class="full-width">
        <el-input type="textarea" v-model="remark" :rows="3" placeholder="请输入备注..." />
      </el-form-item>

      <el-form-item class="btn-group">
        <el-button type="success" @click="cancel_order">取消订单</el-button>
      </el-form-item>


    </el-form>
  </div>
</template>

<script>
  import {
    ORDER_STATUS,
    APPLY_FOR_TYPE,
    STORE_ORDER_AFTER_SALES_STATUS
  } from '@/constants/statusMap';
  export default {
    name: "RedivDetail",
    props: {
      rowData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        STORE_ORDER_AFTER_SALES_STATUS,
        ORDER_STATUS,
        APPLY_FOR_TYPE,
        remark: "",
        formData: null

      };
    },
    created(){
      this.getOrderInfo()

    },
    methods: {
      getOrderInfo() {
        let body = {}
        body.id = this.rowData.id


        this.$httpRequest.get('/order/info', body).then(result => {
          console.log('--99------', result)
          if (result.code == 0) {
            this.formData=result.data

          } else {
            this.$message.error('获取订单详情失败')
          }
        }).catch(e => {
          this.$message.error(e.message)
        });

      },

      cancel_order() {
        if (!this.remark) {
          this.$message.error('取消订单备注不可为空')
          return false;
        }
        this.$emit('cancel_order', {
          id: this.formData.id,
          remark: this.remark
        })
      }
    },
  };
</script>

<style scoped>
  .edit-box {
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }

  .form-grid .el-form-item {
    margin-bottom: 20px;
  }

  .full-width {
    margin-top: 20px;
  }

  .full-width .el-input {

    width: 100%;
  }

  .btn-group {
    text-align: center;
  }

  .goods-box{
    display: flex;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
  }
  .product-item{
    margin-left: 10px;
  }
</style>
